<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.importance" placeholder="请选择历史版本" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="'历史版本号：'+item" :value="item" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        对比
      </el-button>
    </div>
    <div>
      <el-form>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="新数据：">
              <el-input v-model="newStr" type="textarea" :autosize="{minRows: 2, maxRows: 15}" placeholder="请输入新数据"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="旧数据：">
              <el-input v-model="oldStr" type="textarea" :autosize="{minRows: 2, maxRows: 15}" placeholder="请输入旧数据"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="对比结果：">
              <el-switch v-model="fotmat" active-text="line-by-line" inactive-text="side-by-side"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="差异化范围：">
              <el-input-number v-model="context" placeholder=""></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <code-diff :old-string="newStr" :new-string="oldStr" :context="context" :output-format="outputFormat" />
    </div>
  </div>
</template>

<script>
  import {getConfigHistoryList, getConfigHistoryInfo} from '@/api/config'
  import codeDiff from 'vue-code-diff'
  import oldStr from '@/data/oldStr'
  import newStr from '@/data/newStr'

  export default {
    name: 'diff_index',
    components: {
      codeDiff
    },
    filters: {
    },
    data() {
      return {
        oldStr:"历史版本在这里哦~",
        newStr:"请选择对比的版本,新版版本在这里哦~",
        fotmat: false,
        context: 5,
        listQuery: {
          importance: undefined
        },
        importanceOptions: []
      }
    },
    created() {
      const configId = this.$route.params && this.$route.params.id
      console.log("====1=====:id,"+configId)
      this.getList(configId)

    },
    computed: {
      outputFormat () {
        return this.fotmat ? 'line-by-line' : 'side-by-side'
      }
    },
    methods: {
      getList(configId) {
        getConfigHistoryList({
          configId: configId
        }).then(response => {
          this.importanceOptions=response.result
        })
      },
      handleFilter(){
        const configId = this.$route.params && this.$route.params.id
        if(this.listQuery.importance == undefined){
          return
        }
        getConfigHistoryInfo({
          configId: configId,
          version:this.listQuery.importance
        }).then(response => {
          this.newStr=response.result.newContent
          this.oldStr=response.result.oldContent
        })
      }
    }
  }
</script>
